<template>
	<!-- 优惠卷 -->
	<view class="container" v-if="isloding">
		<view class="card" v-for="(item,index) in info" :key="index">
			<view class="card_name">
				{{item.coupon.name}}
			</view>
			<view class="num">
				×1
			</view>
			<view class="name">
				￥{{item.coupon.moeny}}元优惠卷
			</view>
			<view class="time">
				活动时间至<br/>{{item.coupon.start_at}}
			</view>
			<view class="condition" v-if="item.coupon.full==0">
				无门槛使用
			</view>
			<view class="condition" v-if="item.coupon.full!=0">
				满{{item.coupon.full}}可用
			</view>
			<view class="btn" @tap="goIndex">
				立即使用
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				page:1,
				info:'',
				isloding:false
			};
		},
		onLoad(e) {
			// console.log(e.token)
			this.token=e.token
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.request({
				url: this.webUrl+'/user/my/coupon',
				method: 'GET',
				header:{
					token:e.token
				},
				data: {
					page:1
				},
				success: res => {
					uni.hideLoading()
					this.isloding=true
					if(res.data.code==0){
						this.info=res.data.data
						if(res.data.data.length==0){
							uni.showToast({
								title: '暂无优惠卷',
								icon:'none',
								duration:2000
							});
						}
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误',
							icon:'none',
							duration:2000
						});
					}
					// console.log(res)
				},
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon:'none',
						duration:2000
					});
				},
				complete: () => {}
			});
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			this.page++
			uni.request({
				url: this.webUrl+'/user/my/coupon',
				method: 'GET',
				header:{
					token:this.token
				},
				data: {
					page:this.page
				},
				success: res => {
					uni.hideLoading()
					if(res.data.code==0){
						// console.log(res)
						if(res.data.data.length==0){
							uni.showToast({
								title: '没有更多了',
								icon:'none',
								duration:2000
							});
						}else{
							let arr=res.data.data.map(item=>{
								this.info.push(item)
							})
						}
					}else if(res.data.code==3){
						uni.showToast({
							title: res.data.msg,
							icon:'none',
							duration:2000
						});
					}else{
						uni.showToast({
							title: '网络错误，请重试',
							icon:'none',
							duration:2000
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods:{
			goIndex(){
				uni.reLaunch({
				    url: '../index/index'
				});
				// uni.navigateTo({
				// 	url: '../index/index',
				// 	success: res => {},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body{
		height: 100%;
	}
	page{
		height: 100%;
	}
	.container{
		// position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		overflow: hidden;
		background: #f2f2f2;
		.card{
			background-image:url(../../static/card.png);
			background-repeat: no-repeat;
			background-size: 681upx 266upx;
			margin: 24upx auto 0;
			position: relative;
			width:681upx;
			height:266upx;
			.card_name{
				position: absolute;
				left: 39upx;
				top: 23upx;
				font-size:30upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
			}
			.num{
				position: absolute;
				right: 24upx;
				top: 35upx;
				font-size:30upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
			}
			.name{
				position: absolute;
				left: 79upx;
				top: 78upx;
				font-size:56upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
			}
			.time{
				position: absolute;
				right: 45upx;
				top:84upx;
				font-size:24upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
			}
			.condition{
				position: absolute;
				left: 79upx;
				bottom: 41upx;
				font-size:30upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
			}
			.btn{
				position: absolute;
				right: 35upx;
				bottom: 29upx;
				width:131upx;
				height:51upx;
				font-size:24upx;
				text-align: center;
				line-height: 51upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(255,255,255,1);
				background:rgba(254,86,33,1);
				border-radius:10upx;
			}
		}
	}
</style>
